.head {
    height: 70px;
    line-height: 70px;
    background-color: var(--semi-color-fill-0);
    display: flex;
    min-width: 1200px;
    width: 100vw;
    position: fixed;
    left: 0;
    align-items: center;
    // justify-content: space-between;
  
    a{
        display: inline-block;
        width: 200px;
        height: 70px;
        img{
            margin: 0 40px  0 20px;
            
        }
    }
    
    button{
       min-width: 100px;
        height: 30px;
        border-radius: 6px;
        background-color: blue;
        color: white;
        text-align: center;
        line-height: 30px;
        position: relative;
        left: 480px;
        // right: 0;
    }
    ul{
        // flex: 1;
        width: 500px;
        // background-color: red;
        min-width: 700px;
        // margin-left: 0px!important;
        li{
            float: left;
            list-style: none;
            margin-right: 30px;
           
        }
        li:nth-child(1) span{
            font-weight: 900;
        }
        li:hover span{
            color: blue;
            cursor: pointer;
        }
        li:nth-child(1):hover .wrap{
            transition: all 0.3s;
                width: 100vw;
                height: 300px;
                background-color: red;
                position: fixed;
                left: 0;
                top:70px;
                z-index: 2147483647;
            
        }
        li:nth-child(2):hover .wrap{
            transition: all 0.3s;
                width: 70vw;
                // margin: 0 calc(30vw - 200px) 0 200px;
                height: 300px;
                background-color: red;
                position: fixed;
                left:200px;
                top:70px;
                z-index: 99;
            
        }
        li:nth-child(3):hover .wrap{
            transition: all 0.3s;
                width: 70vw;
                // margin: 0 calc(30vw - 200px) 0 200px;
                height: 500px;
                background-color: red;
                position: fixed;
                left:200px;
                top:70px;
                z-index: 99;
            
        }
    }

}
@keyframes myAdvan {
    0%{
        top:40px

    }
    
    100%{
        top:30px
    }
}
.advan{
    width: 300px;
    position: absolute;
    top: 30px;
    z-index: 10000;
    right: 10px;
    height: 40px;
    animation: myAdvan 1.5s infinite alternate  linear;
}
